<template>
  <div class="application-body" :style="bodyStyle">
    <div class="application-header" :class="customClass">
      <header-view :layout="layout" @callBack="headerCallBack" />
    </div>
    <div class="application-content" :class="customClass">
      <div style="width: 100%;height: 100%;position:relative">
        <test-body />
      </div>
    </div>
    <div class="application-footer" :class="customClass">
      <div style="width: 100%;height: 100%;position:relative">
        <footer-view :layout="layout" />
      </div>
    </div>
  </div>
</template>
<script>
import FooterView from '../components/footer';
import HeaderView from '../components/headerGuest';
import TestBody from '@/template/OfficeHall/PcOfficeApp/OfficeHallV2';
import { getToken } from '@/utils/auth';
import { guestLayout } from '@/api/portal/user/layout';
import { saveSystemVital } from '@/api/config/config';
export default {
  name: 'PortalNewIndex',
  components: {
    FooterView, HeaderView, TestBody
  },
  data() {
    return {
      customClass: 'right',
      height: 0,
      bodyHeight: null,
      layout: {},
      menuId: null,
      isMore: false,
      isEntity: false,
      column: {},
      entityTemp: {},
      bodyStyle: {}
    };
  },
  watch: {
    layout(val, oldVal) {
      if (val.qybjt === true) {
        if (val.bakRepeat === true) {
          this.bodyStyle = { background: 'url(' + val.bjt + ') no-repeat', backgroundSize: '100% 100%' };
        } else {
          this.bodyStyle = { background: 'url(' + val.bjt + ') repeat' };
        }
      } else { // 未启用背景图
        this.bodyStyle = { backgroundColor: val.backColor };
      }
    }
  },
  created() {
    if (getToken()) {
      this.$router.push({ path: '/uc/user' });
    }
    if (this.customClass !== 'top') {
      this.bodyHeight = { minHeight: document.body.offsetHeight - 68 + 'px' };
    } else {
      this.bodyHeight = { minHeight: document.body.offsetHeight - 108 + 'px' };
    }
    this.initLayout();
    // 只有登录后才连接
    if (this.token) {
      //  this.initWebsocket()
    }
    this.saveVital();
  },
  destroyed() {
    //  this.closeWebsocket()
  },
  mounted() {
    const tak = this;
    this.$nextTick(() => {
      window.addEventListener('resize', () => { // 监听浏览器窗口大小改变
        // 浏览器变化执行动作
        if (tak.customClass !== 'top') {
          tak.bodyHeight = { minHeight: document.body.offsetHeight - 68 + 'px' };
        } else {
          tak.bodyHeight = { minHeight: document.body.offsetHeight - 108 + 'px' };
        }
      });
    });
  },
  methods: {
    initLayout() {
      guestLayout().then(res => {
        const { data } = res;
        this.layout = data;
      });
    },
    async saveVital() {
      saveSystemVital().then(res => {
      }).catch(() => {
        console.log('记录信息失败！');
      });
    },
    headerCallBack(id) {
      this.isMore = false;
      this.isEntity = false;
      this.menuId = id;
    },
    moreCallBack(data) {
      if (undefined !== data && data !== null) {
        this.isMore = true;
        this.isEntity = false;
        this.column = data;
      }
    },
    parentEntity(data) {
      if (undefined !== data && data !== null) {
        this.entityTemp = data;
        this.isMore = false;
        this.isEntity = true;
      }
    },
    menuCallBack(data) {
      console.log(this.layout);
      if (undefined !== data && data !== null) {
        this.isMore = false;
        this.isEntity = false;
        this.menuId = data;
      }
    },
    entityCallBack(data) {

    }
  }
};
</script>

<style scoped>
.application-body {
  width: 100%;
  height: 100%;
  background-color: #eee;
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  font-size: 14px;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
}
.application-header {
  position: fixed;
  z-index: 99;
  height: 128px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px;
}
.application-content {
  position: absolute;
  width: 100%;
  bottom: 0px;
  top: 128px;
}
.application-footer {
  position: absolute;
  height: 80px;
  width: 100%;
  bottom: -80px;
}
.application-header.right {
  top: 0px;
  right: 0px;
  left: 0px;
}
.application-content.right{
  right: 0px;
  left: 0px;
  padding:0px 60px;
  box-sizing: border-box;
}
.application-header.left {
  top: 0px;
  right: 0px;
  left: 40px;
}
.application-content.left,.application-footer.left{
  top: 68px;
  left: 40px;
  right: 0px;
}
.application-header.top {
  top: 40px;
  right: 0px;
  left: 0px;
}
.application-tool.top{
  top: 0px;
  height: 40px;
  right: 0px;
  left: 0px;
  width: 100%;
}
.application-content.top,.application-footer.top{
  top: 108px;
}
.custom-iframe {
  width: 100%;
  height: 0px;
  overflow: hidden;
}
.application-tools {
  position: fixed;
  z-index: 100;
  width: 40px;
  height: 40px;
  right: 10px;
  top: 50%;
  margin-top: -20px;
}
@media screen and (max-width: 1024px){
  .application-body {
    width: 1024px;
  }
}
</style>
